<?php

$photoBanner_thumbnailHeight = 276; // prevents showing photos beneath center of arc
$photoBanner_thumbnailHeight = 313;

$photoBanner_imagePath       = imagePath . 'photo-banner/';
$photoBanner_thumbnailPath   = $photoBanner_imagePath . 'thumbnail/';

$photoBanner_imageUrl        = $web->get('image-folder') . '/photo-banner/';
$photoBanner_thumbnailUrl    = $photoBanner_imageUrl . 'thumbnail/';

$photoBanner_images          = imagesFromPath($photoBanner_imagePath);
$photoBanner_imagesHtml      = '';

thumbnailsFromImages_y($photoBanner_images, $photoBanner_thumbnailPath, $photoBanner_thumbnailHeight);

foreach ($photoBanner_images as $image)
{
	$photoBanner_imagesHtml .= '<img src="' . $photoBanner_thumbnailUrl . $image['file-name'] . '" alt=""/>';
}

?>

		<style type="text/css">/*<![CDATA[*/

#photo-banner-frame { width:100%; position:absolute; z-index:1 }
#photo-banner       { border-top:7px solid #262262;width:100%; height:<?php echo $photoBanner_thumbnailHeight; ?>px; position:relative; background-color:#000; overflow:hidden; white-space:nowrap }
#photo-banner div   { position:absolute }
#photo-banner img   { margin-right:2px }

		/*]]>*/</style>

<img id="photo-banner-frame" src="$image-folder/photo-banner-frame-taller.png" alt=""/>
<div id="photo-banner"><div style="left:0"><?php echo $photoBanner_imagesHtml; ?></div></div>

	<script type="text/javascript">//<![CDATA[

var photoBanner_body   = document.body,
	photoBanner_html   = photoBanner_body.parentNode,
	photoBanner_window = window;

photoBanner_element            = document.getElementById('photo-banner');
photoBanner_millisecondDelay   = 48;
photoBanner_pixelStep          = 1;
photoBanner_direction          = -1;
photoBanner_intervalId         = 0;
photoBanner_thumbnailHeight    = <?php echo $photoBanner_thumbnailHeight; ?>;

onresize = photoBanner_resizeEvent;
photoBanner_resizeEvent();

// only scroll home page
photoBanner_page = '<?php echo pageId; ?>';

if ('home' == photoBanner_page)
{
	photoBanner_start();
}

function htmlSizeX() { return photoBanner_html.clientWidth; }
function htmlSizeY() { return photoBanner_html.clientHeight; }

function photoBanner_resizeEvent()
{
	var eParent         = photoBanner_element,
		aeImage         = eParent.getElementsByTagName('img'),
		i               = aeImage.length,
		frameHeight     = htmlSizeX() / 1918,
		thumbnailHeight = Math.round(photoBanner_thumbnailHeight * frameHeight);

	photoBanner_element.style.height = thumbnailHeight + 'px';

	while (i--)
	{
		aeImage[i].height = thumbnailHeight;
	}
}

function photoBanner_toggle()
{
	photoBanner_intervalId
	 ? photoBanner_stop()
	 : photoBanner_start();
}

function photoBanner_start()
{
	if (!photoBanner_intervalId)
	{
		photoBanner_intervalId = setInterval(photoBanner_step, photoBanner_millisecondDelay);
//		document.getElementById('photoBanner_toggleButton').firstChild.nodeValue = 'Stop';
	}
}

function photoBanner_stop()
{
	if (intervalId)
	{
		clearInterval(photoBanner_intervalId);
		photoBanner_intervalId = 0;
//		document.getElementById('photoBanner_toggleButton').firstChild.nodeValue = 'Start';
	}
}

function photoBanner_step()
{
	var eParent = photoBanner_element,
		e       = eParent.firstChild,
		o       = e.style,
		x       = parseInt(o.left),
		eImage  = e.firstChild,
		sizeX   = eImage.width;

	x += photoBanner_direction * photoBanner_pixelStep;

	if (sizeX && sizeX <= photoBanner_direction * x)
	{
		e.appendChild(eImage);
		o.left = '0px';
	}
	else
	{
		o.left = x + 'px';
	}
}

	//]]></script>
